<template>
    <div>
        <table border="1">
            <tbody>
                <tr style="background-color: blue;">
                    <td>id</td>
                    <td>酒店名称</td>
                    <td>酒店电话</td>
                    <td>酒店图片</td>
                    <td>酒店地址</td>
                    <td>酒店特色</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in stus" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.phone}}</td>
                    <td>
                        <img v-bind:src="item.img" width="100" height="100">
                    </td>
                    <td>{{item.Addr}}</td>
                    <td>{{item.feature}}</td>
                    <td>{{item.time}}</td>
                    <td>
                        <input type="button" value="修改">
                    </td>
                </tr>
            </tbody>
        </table>
        <select>
            <option value="">请选择</option>
            <option v-bind:value="i.id" v-for="i in citys" :key="i.id">{{i.name}}</option>
        </select>
    </div>
</template>
<script setup lang="ts">
import{ref,reactive}from 'vue'
let stus =ref([
    {id:1,name:"北京如家酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"},
    {id:2,name:"张亦菲酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"},
    {id:3,name:"王妍哲酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"},
    {id:4,name:"谭进酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"},
    {id:5,name:"陈玘酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"},
    {id:6,name:"段子涛酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"},
    {id:7,name:"陈培俊酒店",phone:"152****1526",img:"https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=326&h=183&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3",Addr:"北京市昌平区202",feature:"豪华婚宴",time:"2022-09-20"}
])
let citys=ref([
    {id:1,name:"星级酒店"},
    {id:2,name:"高级酒店"},
    {id:3,name:"三级酒店"},
    {id:4,name:"四季酒店"}
])
</script>
<style scoped>

</style>